<template>
	<view class="container">
		<u-sticky>
			<view class="search-box flex-x-bet-y-center">
				<uni-data-select  v-if="from === 'indexSearch'" :value="queryParams.putType" :localdata="filterTypes" :clear="false" class="filter-type" @change="filterTypeChange"></uni-data-select>
				<view class="flex-1">
					<InputSearch :inputVal="queryParams.content" :customStyle="{margin: '0', flex: '1'}" @searchConfirm="searchInputConfirm"></InputSearch>
				</view>
			</view>
			
			<FilterSelect @search="filterSearch" :showCategory="from !== 'category'"></FilterSelect>
		</u-sticky>
		
		<view class="product-list" v-if="queryParams.putType != 4">
			<ProductItem v-for="(item, index) in listData" :key="item.id" :productInfo="item" :from="from"></ProductItem>
		</view>
		
		
		<view class="product-list" v-else>
			<view class="store-info flex-y-center" v-for="(item, index) in listData" :key="index" @tap="$myUni.navTo('/pages/merchant/detail?id=' + item.id)">
				<image :src="item.firmImgs.split(',')[0] | formatFile" mode="" class="store-avatar"></image>
				<view class="right-info">
					<view class="store-name">{{item.firmName}}</view>
					<view class="gray-text">{{item.mainBusiness}}</view>
					<view class="gray-text">{{item.province}}{{item.city}}{{item.area}}</view>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="loadingStatus" font-size="28" icon-size="30"></u-loadmore>
	</view>
	
</template>

<script>
	import InputSearch from '@/components/InputSearch/index.vue'
	import FilterSelect from '@/components/FilterSelect/index.vue'
	import ProductItem from '@/components/ProductItem/ProductItem.vue';
	import { productSearch } from '@/api/product.js'
	export default {
		components: {
			InputSearch,
			FilterSelect,
			ProductItem
		},
		data() {
			return {
				filterTypes:[
					{text: '厂家货源', value: 1},
					{text: '二手货源', value: 2},
					{text: '租赁资源', value: 3},
					{text: '店铺', value: 4}
				],
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					content: '',
					putType: 1,
					provinceId: '',
					cityId: '',
					areaId: '',
					startShowPrice: '',
					endShowPrice: '',
					categoryId: ''
				},
				listData: [],
				total: 0,
				loadingStatus: 'loading',
				from: ''  // indexSearch 首页搜索进入; compare添加对比设备  factory 厂家货源
			};
		},
		onLoad(options){
			this.queryParams.content = options.keyword ? decodeURI(options.keyword) : ''
			this.from = options.from || ''
			
			// 筛选类型 1厂家 2二手 3租赁 4店铺
			if(options.putType){
				this.queryParams.putType = Number(options.putType)
			}
			
			if(options.categoryId){
				this.queryParams.categoryId = options.categoryId
			}
			
			if(options.keyword){
				this.searchInputConfirm(this.queryParams.content)
			}else{
				this.productSearch()
			}
			
			
			this.setNavBarText()
			
		},
		methods:{
			searchInputConfirm(value){
				this.queryParams.content = value;
				this.queryParams.pageNo = 1
				this.listData = []
				this.productSearch()
			},
			initQuery(){
				this.queryParams.pageNo = 1;
				
			},
			filterSearch(e){
				console.log(e);
				this.queryParams.pageNo = 1
				this.listData = []
				this.queryParams.provinceId = e.areaInfo.province.value
				this.queryParams.cityId = e.areaInfo.city.value
				this.queryParams.areaId = e.areaInfo.area.value
				this.queryParams.categoryId = e.categoryInfo.category4.value
				this.queryParams.startShowPrice = e.priceInfo.min
				this.queryParams.endShowPrice = e.priceInfo.max
				this.productSearch()
			},
			filterTypeChange(e){
				this.queryParams.pageNo = 1
				this.queryParams.putType = e
				this.listData = []
				this.productSearch()
			},
			setNavBarText(){
				let title = ''
				if(this.from == 'indexSearch'){
					title = '搜索'
				}else if(this.from === 'factory'){
					title = '厂家货源'
				}else if(this.from === 'compare'){
					title = '添加设备'
				}else if(this.from === 'used'){
					title = '二手货源'
				}else if(this.from === 'rentOut'){
					title = '租赁货源'
				}else if(this.from === 'category'){
					title = '商品分类'
				}
				uni.setNavigationBarTitle({
					title
				})
			},
			productSearch(){
				this.loadingStatus = 'loading'
				productSearch(this.queryParams).then(res => {
					if(this.queryParams.putType === 4){
						res.result.records.forEach(item => {
							item.firmImgs = item.firmImgs || ''
						})
					}
					this.listData.push(...res.result.records)
					this.total = res.result.total
					this.loadingStatus = this.total > this.listData.length ? 'loadmore' : 'nomore'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		padding-top: 0;
	}
	
	::v-deep .uni-select{
		border: 0 !important;
		padding: 0 !important;
	}
	
	::v-deep .uni-select__selector-item{
		justify-content: center;
	}
	
	.search-box{
		display: flex;
		background-color: #fff;
		padding: 30rpx;
		position: relative;
		z-index: 99;
		
		.filter-type{
			margin-right: 20rpx;
			width: 170rpx;
			text-align: center;
		}
	}
	
	
	.product-list{
		margin: 30rpx;
	}
	
	.store-info {
		background: #FFFFFF;
		border-radius: 19rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	
		.store-avatar {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}
	
		.right-info {
			flex: 1;
			margin-left: 30rpx;
	
			.store-name {
				font-size: 33rpx;
				color: #333333;
				font-weight: 500;
			}
	
			.gray-text {
				font-size: 27rpx;
				color: #808080;
				padding-top: 10rpx;
			}
		}
	}
</style>
